<template>
  <jax-desc :title="title">
    <el-button type="primary" icon="plus" @click="handleAdd" style="margin-bottom: 12px">添加</el-button>
    <el-table :data="modelValue" border>
      <el-table-column label="排序" width="100px">
        <template #default="scope">
          <el-input v-model="scope.row.rank"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="标签">
        <template #default="scope">
          <el-input v-model="scope.row.label" placeholder="请输入标签"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="字段">
        <template #default="scope">
          <el-input v-model="scope.row.name" placeholder="请输入字段"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150px">
        <template #default="scope">
          <el-button link type="primary" icon="delete" @click="modelValue.splice(scope.$index, 1)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </jax-desc>
</template>
<script setup>
const emits = defineEmits('update:modelValue')
const props = defineProps({
  title: { type: String, default: '数组数据' },
  modelValue: { type: Array, default: () => [] },
})

// 新增
const handleAdd = () => {
  props.modelValue.push({
    rank: props.modelValue.length + 1,
  })
  emits('update:modelValue', props.modelValue)
}
</script>
<style lang="scss" scoped></style>
